<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户角色</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 添加角色按钮 -->
      <el-button type="primary" class="functionBtn" @click="addRoleDialog = true">添加角色</el-button>
      <el-table :data="rolesList">
        <!-- 展开列的功能未完成 -->
        <el-table-column type="expand">
          <!-- 通过插槽形式获取本行数据 pre元素可定义预格式化的文本-->
          <template slot-scope="scope">
            <!-- <pre>
              {{ scope.row }}
            </pre> -->
            <el-row :gutter="20">
              <el-col :span="6">
                <!-- 一级权限 -->
                {{ scope.row.children.authName }}
              </el-col>
              <el-col :span="14">
                <!-- 二级和三级权限 -->
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <!-- 索引列 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="roleName" label="角色名称">
        </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述">
        </el-table-column>
        <el-table-column prop="path" label="操作">
          <!-- 插槽形式自定义操作列的渲染 -->
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditRoleDialog(scope.row.id)">编辑
            </el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeRole(scope.row.id)">删除</el-button>
            <el-button type="warning" icon="el-icon-setting" size="mini">分配权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加角色对话框 -->
      <el-dialog title="添加角色" :visible.sync="addRoleDialog" width="30%" @close="resetAddRoleForm">
        <el-form ref="addRoleFormRef" :model="rolesObj" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="rolesObj.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="rolesObj.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addRoleDialog = false">取 消</el-button>
          <el-button type="primary" @click="addRole">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑角色对话框 ：点击编辑按钮后展示-->
      <el-dialog title="编辑角色" :visible.sync="editRoleDialog" width="30%" @close="resetEditRoleForm">
        <el-form ref="editRolesFormRef" :model="rolesData" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="rolesData.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="rolesData.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editRoleDialog = false">取 消</el-button>
          <el-button type="primary" @click="addEditRole">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rolesList: [],
      rolesObj: {//表单里addForm用到
        roleName: '',
        roleDesc: '',
      },
      addRoleDialog: false,
      editRoleDialog: false,
      rolesData: {}//后台数据editForm用到
    }
  },
  methods: {
    async getRolesList() {
      const { data: res } = await this.$http.get('roles');
      // console.log(res)
      if (res.meta.status !== 200) return this.$msg.error("获取角色列表失败");
      this.rolesList = res.data
    },
    // 添加角色
    async addRole() {
      const { data: res } = await this.$http.post('roles',
        // roleName: this.rolesObj.roleName,
        // roleDesc: this.rolesObj.roleDesc
        this.rolesObj
      )
      console.log(res)
      if (res.meta.status !== 201) return this.$msg.error("角色添加失败");
      // 添加角色成功
      this.$msg.success("角色添加成功");
      // 关闭编辑用户对话框
      this.addRoleDialog = false;
      // 重新渲染
      this.getRolesList();
    },
    // 重置添加用户表单
    resetAddRoleForm() {
      this.$refs.addRoleFormRef.resetFields();
      // console.log(11)
    },
    // 根据id查询角色数据
    async showEditRoleDialog(id) {
      this.editRoleDialog = true;
      const { data: res } = await this.$http.get(`roles/${id}`);
      // console.log(res);
      if (res.meta.status !== 200) return this.$msg.error("修改用户角色失败");
      this.rolesData = res.data;

    },
    // 编辑角色提交
    async addEditRole() {
      const { data: res } = await this.$http.get(`roles/${this.rolesData.roleId}`, {
        roleName: this.rolesData.roleName,
        roleDesc: this.rolesData.roleDesc
      })
      // console.log(res)
      if (res.meta.status !== 200) return this.$msg.error("角色添加失败");
      // 编辑角色成功
      this.$msg.success("角色修改成功");
      // 重新渲染
      this.getRolesList();//页面上不显示：后台的问题,后台没有改数据
      // 关闭编辑用户对话框
      this.editRoleDialog = false;
    },
    // 重置编辑用户表单
    resetEditRoleForm() {
      this.$refs.editRolesFormRef.resetFields();
    },

    // 删除角色
    removeRole(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`roles/${id}`).then((res) => {
          // console.log(res)
          if (res.status !== 200) return this.$msg.error("删除用户失败");
          this.$msg({
            type: 'success',
            message: '删除成功!'
          });
          // 重新渲染
          this.getRolesList();
        });
      }).catch(() => {
        this.$msg({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // // 角色授权
    // async assignRight(id) {
    //   const { data: res } = this.$http.post(`roles/${id}/rights`, this.rolesData.);
    //   console.log(res);
    // }

  },
  created() {
    this.getRolesList();
  }

}
</script>

<style lang="less" scoped>
</style>